<template>
    <div>
        <el-container>
            <el-header style="text-align: left; font-size: 18px">
                <el-row :gutter="30">
                    <el-col :span="6">
                        <div class="title" style="font-weight: 540; font-size: 22px;">
                            预约挂号
                        </div>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <div class="grid-content bg-purple">
                            <el-row style="text-align: right;">
                                <el-button type="primary" class="filter-item" @click="handleCreate" plain>添加</el-button>
                                <el-button type="primary" @click="deleteTableData" plain>删除</el-button>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-radio-group v-model="item">
                            <el-radio v-for="(radio, index) in List" :key="index" :label="radio" @change="handleRadio">
                                {{ radio }}
                            </el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="7">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" @blur="serachUserData">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="3">
                        <el-cascader v-model="value" :options="options">
                        </el-cascader>
                    </el-col>
                    <el-col :span="5">
                        <el-input v-model="input" @blur="serachUser" ref="serachInp" placeholder="请输入患者姓名"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="serachUser" style="background-color: rgba(0, 110, 255, 1);">
                            搜索
                        </el-button>
                    </el-col>
                </el-row>
                <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    tooltip-effect="dark" style="width: 100%; " @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="" align="center">
                    </el-table-column>
                    <el-table-column prop="userName" label="患者姓名" width="" align="center">
                    </el-table-column>
                    <el-table-column prop="" label="就诊卡号" width="160" align="center">
                        <template slot-scope="scope">{{ scope.row.orderForm }}</template>
                    </el-table-column>
                    <el-table-column label="预约时间" width="150" class="cell" align="center">
                        <template slot-scope="scope">{{ scope.row.operateTime }}</template>
                    </el-table-column>
                    <el-table-column prop="seeNum" label="住院号" width="" align="center">
                    </el-table-column>
                    <el-table-column label="挂号科室" width="" align="center">
                        <template slot-scope="scope">{{ scope.row.busType == 1 ? '内科-肾内科' : '外科-神经外科' }}</template>
                    </el-table-column>
                    <el-table-column label="挂号类型" width="" align="center">
                        <template slot-scope="scope">{{ scope.row.busType == 1 ? '专家号' : '普通号' }}</template>
                    </el-table-column>

                    <el-table-column label="支付方式" width="" align="center">
                        <template slot-scope="scope">{{ scope.row.payment == 1 ? '余额' : scope.row.payment == 2 ?
                            '支付宝' : '微信' }}</template>
                    </el-table-column>
                    <el-table-column prop="regCost" label="挂号费" width="" align="center">
                    </el-table-column>
                    <el-table-column label="挂号状态" align="center">
                        <template slot-scope="scope">{{ scope.row.paymentStatus == 1 ? '已就诊' : '待就诊' }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope={row}>
                            <router-link :to='`/Costdetail?id=${row.id}`'>
                                <i class="el-icon-s-order" style="color:rgba(0, 110, 255, 1);font-size: 20px;"></i>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" :total="tableData.length"
                    @current-change="handleCurrentChange" layout="total,  prev, pager, next, jumper"
                    :current-page="currentPage" :page-size="pageSize">
                </el-pagination>
            </el-main>
            <!-- form表单 -->
            <div class="tab-container">
                <el-dialog :visible.sync="dialogFormVisible">
                    <el-form :model="questionForm" ref="dataForm" label-position="left" label-width="90px"
                        style="width: 400px; margin-left:50px;">
                        <el-form-item label="患者姓名">
                            <el-input type="textarea" :rows="1" v-model="questionForm.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="来源">
                            <el-radio-group v-model="questionForm.source" style="margin-right:6px;">
                                <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{ radio
                                }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="就诊卡号">
                            <el-input v-model="questionForm.orderForm" />
                        </el-form-item>
                        <el-form-item label="支付金额">
                            <el-input v-model="questionForm.regCost" />
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <el-radio-group v-model="questionForm.payment">
                                <el-radio v-for="(radio, index) in paymentList" :key="index" :label="radio">{{ radio
                                }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="业务类型">
                            <el-radio-group v-model="questionForm.busType">
                                <el-radio v-for="(radio, index) in busType" :key="index" :label="radio">{{
                                    radio
                                }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="挂号状态">
                            <el-radio-group v-model="questionForm.paymentStatus">
                                <el-radio :label="1">已缴费</el-radio>
                                <el-radio :label="2">未缴费</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="费用类型">
                            <el-radio-group v-model="questionForm.costType">
                                <el-radio :label="1">西药费</el-radio>
                                <el-radio :label="2">中药费</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="createData()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </el-container>
    </div>
</template>
<script>
import { getList, addTableData, deletes, delUserData } from '@/api/outpation'
import { getNowDate, createordernum } from '@/utils/costManagement'
export default {
    data() {
        return {
            List: ['全部', '待就诊', '已就诊'],
            item: '全部',
            value: '',
            value1: '',
            input: '',
            multipleSelection: [],
            options: [{
                value: '选项1',
                label: '内科',
                children: [{
                    value: '选项1',
                    label: '消化内科',
                },
                {
                    value: '选项2',
                    label: '血液内科'
                },
                {
                    value: '选项3',
                    label: '风湿免疫内科'
                }, {
                    value: '选项4',
                    label: '肾内科'
                }]
            }, {
                value: '选项2',
                label: '外科',
                children: [{
                    value: '选项1',
                    label: '神经外科',
                }, {
                    value: '选项2',
                    label: '骨骼外科'
                }]
            }],
            tableDataList: [],
            currentPage: 1,
            pageSize: 10,
            // 表单
            subjectList: ["微信小程序", "支付宝", "医院APP"],
            paymentList: ['余额', '微信', '支付宝'],
            busType: ['门诊缴费', '住院缴费'],
            input: "",
            questionForm: {
                "_id": "",
                "operateTime": "",
                "orderForm": "",
                "userName": "",
                "seeNum": "",
                "source": "",
                "costType": "",
                "busType": "",
                "cost": ["", ""],
                "payment": "",
                "regCost": "",
                "paymentStatus": "",
                "isChecked": false,
                "isdelete": 1
            },
            dialogFormVisible: false,
        }
    },

    mounted() {
        this.getTableDate()
    },
    computed: {
        tableData() {
            let _role = this.tableDataList.filter(list => {
                return !list.isdelete
            })
            return _role
        }

    },
    methods: {
        // 获取数据
        async getTableDate() {
            const res = await getList()
            // console.log(res);
            this.tableDataList = res.data
        },
        async handleRadio() {
            this.value1 = ''
            this.input = ''
            let _arr = await getList()
            let serachArr = []
            if (this.item == '全部') {
                this.getTableDate()
            } else if (this.item == '待就诊') {
                _arr.data.forEach(item => {
                    if (item.paymentStatus != 1) {
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                this.currentPage = 1
                this.pageSize = 10
            } else {
                _arr.data.forEach(item => {
                    if (item.paymentStatus == 1) {
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                this.currentPage = 1
                this.pageSize = 10
            }
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 搜索
        async serachUser(e) {
            this.value1 = ''
            this.item = '全部'
            let _val = this.$refs.serachInp.value
            // 如果输入框内容不为空  就遍历数据库中的数据 并且返回 符合搜索要求数据
            if (_val != '') {
                let _arr = await getList()
                let serachArr = []

                _arr.data.forEach(item => {
                    if (item.userName.indexOf(_val) >= 0) {
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                this.currentPage = 1
                this.pageSize = 10
            } else {
                this.getTableDate()
            }
        },
        async serachUserData(e) {
            this.item = '全部'
            this.input = ''
            let _val = this.value1
            // console.log(start);
            // 如果输入框内容不为空  就遍历数据库中的数据 并且返回 符合搜索要求数据
            if (_val != '') {
                let start = _val[0].getTime()
                let end = _val[1].getTime()
                let _arr = await getList()
                let serachArr = []
                _arr.data.forEach(item => {
                    let data = new Date(item.operateTime)
                    let time = data.getTime()
                    // console.log(time);
                    if (end > time && time > start) {
                        // console.log(item);
                        serachArr.push(item)
                    }
                })
                this.tableDataList = serachArr
                this.currentPage = 1
                this.pageSize = 10
                // console.log(serachArr);
            } else {
                this.getTableDate()
            }
        },
        // 导入表单
        handleCreate() {
            this.questionForm = {
                "operateTime": getNowDate(),
                "orderForm": createordernum('Dh'),
                "userName": "",
                "seeNum": createordernum('El'),
                "source": "",
                "costType": "",
                "busType": "",
                // "cost": ["", ""],
                "payment": "",
                "regCost": "",
                "paymentStatus": "",
                "isChecked": false,
                "isdelete": 0
            };
            this.dialogFormVisible = true;
        },
        // 添加
        createData() {
            const params = this.questionForm;
            // alert(JSON.stringify(params));
            this.tableDataList.push(params)
            addTableData(params)
            this.$message({
                message: '导入成功',
                type: 'success'
            })
            // setTimeout(() => {
            //     this.getTableDate()
            // }, 1)
            this.dialogFormVisible = false
        },
        deleteTableData() {
            if (this.multipleSelection.length == 0) {
                this.$alert("请先选择要删除的数据", "提示", {
                    confirmButtonText: "确定",
                });
            } else {
                this.multipleSelection.forEach(async item => {
                    await deletes(item.id)
                    
                    this.getTableDate()
                })
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            }
        }
    }
}

</script>
<style lang="scss" scoped>
.title {
    position: relative;
    margin-left: 40px;

    &:before {
        top: 10px;
        left: -40px;
        position: absolute;
        display: block;
        width: 27px;
        height: 10px;
        border-radius: 8px 10px 10px 8px;
        background: rgba(0, 110, 255, 1);
        content: '';
    }
}

.el-main {
    background-color: #fff;
    padding: 10px;
    min-height: 600px;
    overflow: hidden;
    border-radius: 8px
}

.el-radio {
    line-height: 40px;
    margin-right: 16px;
}
</style>